<template>
  <div class="print">    
    <!-- 左侧 -->
    <div class="left">
      <div class="print_editor">
        <button @click="handleAdd" class="card-item">
          <dl>
            <dt>
              <img src="../../assets/image/addPrint.png" alt="">
            </dt>
            <dd><span>添加打印机</span></dd>
          </dl>
        </button>
        <button @click="handleDelete" class="card-item" :disabled="disabled || !printList.length">
          <dl>
            <dt>
              <img src="../../assets/image/deletePrint.png" alt="">
            </dt>
            <dd>
              <span :class="{'disabled':disabled}">删除打印机</span>
            </dd>
          </dl>
        </button>
        <button @click="handleOpen" class="card-item" :disabled="currentPint.isInternetPrint === 1 || !printList.length">
          <dl>
            <dt><img src="../../assets/image/openPrint.png" alt=""></dt>
            <dd><span :class="{'disabled':disabled}">开启云打印</span></dd>
          </dl>
        </button>
        <button @click="handleClose" class="card-item" :disabled="currentPint.isInternetPrint === 2 || !printList.length">
          <dl>
            <dt><img src="../../assets/image/closePrint.png" alt=""></dt>
            <dd><span :class="{'disabled':disabled}">关闭云打印</span></dd>
          </dl>
        </button>
      </div>
      <div class="print_list">
        <a-spin :spinning="leftLoading">
          <div class="refresh">
            <img src="../../assets/image/refresh.png" @click="getPrintList" alt="">
          </div>
          <div class="list" v-if="printList.length">
            <li v-for="item in printList" :key="item.id" @click="getList(item)" :class="{'active':currentPint.id == item.id}">
              <img src="../../assets/image/printIcon.png" alt="">
              <div>
                <div><span class="list_icon list_icon_green"></span><span class="name">{{item.printerPosition}}</span></div>
                <div><span class="list_icon list_icon_orange"></span><span class="name">{{item.printerName}}</span></div>
                <div><span class="list_icon" :class="`list_icon_1`"></span><span class="name" :class="{'red':item.isInternetPrint === 2}">{{item.isInternetPrint === 1 ? '正常' : '云打印服务器已关闭'}}</span></div>
              </div>
            </li>
          </div>
          <a-empty v-else :image="simpleImage" />
        </a-spin>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="right">
      <div class="current_task">
        <div class="header">
          <div class="title"><span></span>当前打印任务</div>
          <div class="search">
            <a-input v-model:value="currentForm.keyDown" placeholder="请输入关键词搜素">
              <template #suffix>
                <SearchOutlined style="color: rgba(0, 0, 0, 0.25)" />
              </template>
            </a-input>
            <a-button @click="getCurrentList" type="primary">查询</a-button>
          </div>
        </div>
        <a-table :scroll="{ x:0, y: tableHeight }" :dataSource="dataCurrent" :pagination="pagination" :columns="columnCurrent">
          <template #bodyCell="{ column, record,index}">
            <template v-if="column.key === 'index'">
              <span>{{index + 1}}</span>
            </template>
            <template v-if="column.key === 'taskId'">
              <a-tooltip placement="topLeft">
                <template #title>
                  <span>{{ record.taskId }}</span>
                </template>
                {{ record.taskId }}
              </a-tooltip>
            </template>
            
            <template v-if="column.key === 'statua'">
              <span :style="{color:record.statua == '1'?'red':''}">{{record.statua}}</span>
            </template>
            <template v-if="column.key === 'caozuo'">
              <a v-if="record.caozuo == '取消打印'" @click="cancelPrient">取消打印</a>
              <a v-else @click="submitPrient">打印</a>
            </template>
          </template>
        </a-table>
      </div>
      <div class="history_task">
        <div class="header">
          <div class="title"><span></span>历史打印任务</div>
          <div class="search">
            <a-input v-model:historyForm="historyForm.keyDown" placeholder="请输入关键词搜素">
              <template #suffix>
                <SearchOutlined style="color: rgba(0, 0, 0, 0.25)" />
              </template>
            </a-input>
            <a-button @click="getHistoryList" type="primary">查询</a-button>
          </div>
        </div>
        <a-table :scroll="{ x:0, y: tableHeight }" :dataSource="dataHistory" :pagination="paginationHis" :columns="columnhistory">
          <template #bodyCell="{ column, record,index}">
            <template v-if="column.key === 'index'">
              <span>{{index + 1}}</span>
            </template>
            <template v-if="column.key === 'taskId'">
              <a-tooltip placement="topLeft">
                <template #title>
                  <span>{{ record.taskId }}</span>
                </template>
                {{ record.taskId }}
              </a-tooltip>
            </template>
            <template v-if="column.key === 'statua'">
              <span :style="{color:record.statua == '1'?'red':''}">{{record.statua}}</span>
            </template>
          </template>
        </a-table>
      </div>
    </div>
    <!-- 提示框 -->
    <a-modal v-model:visible="visible" width="400px" okText="确定" cancelText="取消" :centered="true" :title="title" @ok="handleOk">
      <div class="modal_content">
        <p v-if="title == '取消打印'">确定取消打印?</p>
        <p v-else>确定{{title}}"<span class="print_tips">{{currentPint.printerName}}</span>"?</p>
      </div>
    </a-modal>
    <!-- 添加打印机 -->
    <Add :addVisiblePrint="addVisiblePrint" :getPrintList="getPrintList" @setValue="setValue" />
  </div>
</template>
<script>
import { SearchOutlined, DownOutlined } from '@ant-design/icons-vue';
import { columnCurrent, columnhistory } from './column'
import Add from "./add.vue"
const { BrowserWindow, BrowserView, webContents } = require('@electron/remote')
import { getPintList, pint } from '@/pint'
import { message, Empty } from 'ant-design-vue';
import config from '@/config'
import column from './column'
import { randomRange, arrIdentical,mbTransform } from '@/utils'
import api from '@/api/pint'
export default {
  components: {
    SearchOutlined,
    DownOutlined,
    Add
  },
  data() {
    return {
      tableHeight: document.body.clientHeight / 2 - 250,
      timer:null,
      disabled: true,
      leftLoading:true,
      currentpage: 1,
      currentValue: "",
      historyValue: '',
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      currentForm:{
        "pageIndex": 1,
        "pageSize": 10,
        "printStationId": "",
        "keyDown":""
      },
      historyForm:{
        "pageIndex": 1,
        "pageSize": 10,
        "printStationId": "",
        "keyDown":""
      },
      currentPint:{},
      printList: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total:0,
        defaultPageSize:10,
        showQuickJumper: true,
        showTotal: (total) => {
          return `共 ${total} 条数据`
        },
        showSizeChanger: true,
        pageSizeOptions: ["10", "15", "20"],
        onChange: (current, size) => {
          this.pagination.current = current;
          this.currentForm.pageIndex = current
          this.getCurrentList()
        },
        onShowSizeChange: (pageIndex, pageSize) => {
          this.pagination.pageSize = pageSize;
          this.currentForm.pageSize = pageSize
          this.getCurrentList()
        },
      },
      paginationHis: {
        current: 1,
        pageSize: 10,
        defaultPageSize:10,
        total:0,
        showQuickJumper: true,
        showTotal: (total) => {
          return `共 ${total} 条数据`
        },
        showSizeChanger: true,
        pageSizeOptions: ["10", "15", "20"],
        onChange: (current, size) => {
          this.paginationHis.current = current;
          this.historyForm.pageIndex = current
          this.getHistoryList()
        },
        onShowSizeChange: (pageIndex, pageSize) => {
          this.paginationHis.pageSize = pageSize;
          this.historyForm.pageSize = pageSize
          this.getHistoryList()
        },
      },
      state:JSON.parse(localStorage.getItem('state')) || {},
      // 表格
      dataCurrent: [],
      columnCurrent: columnCurrent,
      columnhistory: columnhistory,
      dataHistory: [],
      // 提示框
      visible: false,
      title: "",
      addVisiblePrint: false,
    }
  },
  created() {
    window.addEventListener('resize', this.setTableheight);
    this.getPrintList();
    this.trainingRotation()
  },
  methods: {
    trainingRotation(){
      this.timer = setInterval(()=>{
        this.getList(this.currentPint)
      },10000)
    },
    setTableheight() {
      this.tableHeight = document.body.clientHeight / 2 - 250;
    },
    // 添加打印机
    handleAdd() {
      this.addVisiblePrint = true;
    },
    setValue(val) {
      this.addVisiblePrint = val;
    },
    // 删除打印机
    handleDelete() {
      this.title = "删除打印机"
      this.visible = true;
    },
    submitDelete() {
      let postData = JSON.parse(JSON.stringify({
        id: this.currentPint.id
      }))
      console.log(postData)
      api.deletePrinterList(postData).then(res =>{
        console.log(res)
        message.success('删除打印机完成！');
        this.getPrintList()
      })
    },
    // 开启打印机
    handleOpen() {
      this.title = "开启打印机"
      this.visible = true;
    },
    submitOpen() {
      let postData = JSON.parse(JSON.stringify({
        id: this.currentPint.id,
        isUndo:true
      }))
      api.switchPrinterList(postData).then(res => {
        message.success('已开启！');
          this.getPrintList()
        })
    },
    // 关闭打印机
    handleClose() {
      this.title = "关闭打印机"
      this.visible = true;
    },
    submitClose() {
      let postData = JSON.parse(JSON.stringify({
        id: this.currentPint.id,
        isUndo:false
      }))
      api.switchPrinterList(postData).then(res => {
        message.success('已关闭！');
          this.getPrintList()
        })
    },
    // 获取打印机列表
    getPrintList() {
      let postData = JSON.parse(JSON.stringify({
        printStationId :this.state.printStationId
      })) 
      this.leftLoading = true
      api.printerList(postData).then(res => {
        this.printList = res.data
        this.leftLoading = false
        if(res.data.length){
          this.currentPint = res.data[0]
          this.getList(this.currentPint)
        }
      }).catch(err=>{
        this.leftLoading = false
      })
     },
    // 获取打印任务列表
    getList(item) {
      this.currentPint = item
      this.disabled = false
      this.currentForm = {...this.currentForm,printerFid:item.fid,printStationId:item.printStationId}
      this.historyForm = {...this.historyForm,printerFid:item.fid,printStationId:item.printStationId}
      this.getCurrentList();
      this.getHistoryList();
    },
    // 获取当前打印任务列表
    getCurrentList() { 
      let postData = JSON.parse(JSON.stringify({...this.currentForm}))
      api.getCurrentList(postData).then( res => {
        this.dataCurrent = res.data ? res.data.list: []
        this.pagination.total = res.data ? res.data.list.length : 0
      })
     },
    // 获取历史打印任务列表
    getHistoryList() {
      let postData = JSON.parse(JSON.stringify({...this.historyForm}))
      api.getHistoryList(postData).then( res => {
        this.dataHistory =  res.data && res.data.topicList
        this.paginationHis.total = res.data && res.data.topicList.length
      })
    },
    // 打印
    submitPrint() {
      this.title = "取消打印"
      this.visible = true;
    },
    // 确定打印
    submitSubmitPrint(item) {
      pint(BrowserWindow, {
        pintId: item.id,
        name: item.name,
        url: item.url,
        pageSize: 'A3'
      })
    },
    // 取消打印
    cancelPrient() {
      this.title = "取消打印"
      this.visible = true;
    },
    submitCancelPrient() { },
    // 提示框操作
    handleOk() {
      this.visible = false;
      switch (this.title) {
        case "取消打印":
          this.submitCancelPrient()
          // 取消打印
          break;
        case "删除打印机":
          this.submitDelete();
          // 删除打印机
          break;
        case "开启打印机":
          this.submitOpen();
          // 开启打印机
          break;
        case "关闭打印机":
          this.submitClose();
          // 关闭打印机
          break;
        default:
          break;
      }
    }
  }
}
</script>

<style lang="scss" scope>
@import "./index.scss";
</style>